<script setup lang="ts">
import OrderItem from "../../components/OrderItem.vue"
import {ref} from 'vue'
import {downloadExcel, orderInfo} from "../../api/order.ts";
const page = ref(1)
const pageSize = ref(4)
const totalPages = ref(1)
const role =  sessionStorage.getItem('role')
const downloadUrl = ref('')
const orderList = ref<any[]>([])



function download(){
  downloadExcel().then(res =>{
    downloadUrl.value = res.data.result
    console.log(downloadUrl.value)
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = downloadUrl.value;
    link.setAttribute('download', '订单报表.xlsx');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  })

}

function changePage(newPage: number){
  page.value = newPage;
  orderInfo({
    page: page.value,
    pageSize: pageSize.value
  }).then(res =>{
    orderList.value = res.data.result.content
    totalPages.value = res.data.result.totalPages
  })
}
changePage(1)
</script>

<template>
  <el-button v-if = "role === 'CEO' || role === 'STAFF'" @click = 'download' size="large">下载订单</el-button>
  <div class="store-list">
    <OrderItem v-for="order in orderList" :key="order.id" :orderId="order.id" class="order-item"></OrderItem>
  </div>
  <div class="pagination-container">
    <el-pagination background layout="prev, pager, next" :page-count="totalPages" @current-change="changePage" />
  </div>
</template>

<style scoped>
.store-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.order-item {
  width: calc(50% - 10px);
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 20px;
  width: 100%;
}
</style>